<template>
    <el-table 
        :data="data" 
        highlight-current-row 
        border 
        style="width: 100%" 
        v-if="writeStatus"
        row-key="dictRecordId"
        @expand-change="handleExpandChange"
        @row-click="handleRowClick"
        :expand-row-keys="expandRowKeys">

        <el-table-column type="expand" >
            <template slot-scope="props">
                <div style="padding-left: 60px;">
                    <h2 style="color: red;">不熟练的单词</h2>
                    <div v-for="item in errorData" :key="item.wordId" class="box">
                        <span class="tt">纯假名型：</span><span class="tt1">{{ item.riWordKana }}</span><br/>
                        <span class="tt">日语单词：</span><span class="tt1">{{ item.riWord }}</span> <br/>
                        <span class="tt">中文解释：</span><span class="tt3">{{ item.zhWord }}</span><br/>
                        <audio :src="item.riRy" controls="controls" style="margin: 10px ;"></audio>
                    </div>
                </div>
            </template>
        </el-table-column>

        <el-table-column v-for="item in formDefinition" :key="item.name" :prop="item.name" :label="item.title"
            :width="item.width" align="center">
            <template slot-scope="props">
                <span v-if="item.name === 'dictType'">{{getDictType(props.row[item.name])}}</span>
                <span v-else>{{ props.row[item.name] }}</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="180">
            <template slot-scope="scope">
                <el-button v-if="scope.row.falseCount && scope.row.falseCount > 0"  @click.native.prevent="reviver(scope.row)" plain type="warning" size="small">补考</el-button>
                <el-button v-else plain type="success" size="small">通过</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

 
<script>
export default {
    props: {
        //渲染组件使用的数据集
        data: {
            type: Array,
            required: false,
        },
        //考试错误的单词
        errorData: {
            type: Array,
            required: false,
        },
        /**
         * 数据表格式定义
         * title: 数据表格的标题
         * name:  后端返回要渲染的字段名称
         * width: 当前数据占用列的宽度
         */
        formDefinition: {
            type: Array,
            required: true,
            default: [{ title: "标题", name: "field", width: "180" }]
        },
        writeStatus:{
            type: Boolean,
            required: true
        }
    },
    data(){
        return {
            expandRowKeys:[]
        }
    },
    methods: {
        reviver(row) {
            this.$emit('reviver', row)
        },
        getDictType(type){
            switch(type){
                case 'RI_RO_ZH':
                    return '日译中';
                case 'ZH_TO_RI':
                    return '中译日';
            }
        },
         //设置点击行打开扩展只打开一个扩展
         handleRowClick(row, column, event) {
            if(this.expandRowKeys.includes(row.dictRecordId)){
                this.expandRowKeys = [];
            }else{
                this.expandRowKeys = [row.dictRecordId]
                this.$emit('getErrorData', row.dictRecordId)
            } 
        },
        //设置点击扩展箭头只打开一个扩展
        handleExpandChange(row, expandedRows) {
            if(this.expandRowKeys.includes(row.dictRecordId)){
                this.expandRowKeys = [];
            }else{
                this.expandRowKeys = [row.dictRecordId]
                this.$emit('getErrorData', row.dictRecordId)
            }
        }
    },
};
</script>
  
<style scoped lang="scss">
.el-table {
    margin-top: 18px;
}
.tt,.tt1,.tt2,.tt3{
    font-size: 24px;
    margin: 3px 0px;
}
.tt{
    font-weight: bold;
    padding: 0px 8px 0px 0px;
}
.tt1{
    display: inline-block;
    width: 220px;
}
.tt2{
    display: inline-block;
    width: 220px;
}
.box{
    display: inline-block;
    border: 1px dashed grey;
    padding: 10px 10px;
    border-radius: 8px;
    margin: 10px;
}
</style>
  